@import "../node_modules/@jsplumbtoolkit/browser-ui/css/jsplumbtoolkit.css";
@import "../node_modules/@jsplumbtoolkit/browser-ui/css/jsplumbtoolkit-controls.css";

app-root, jsplumb-surface, .jtk-surface {
  width:100%;
  height:100%;
}

:root {
  --bg-choice:rebeccapurple;
  --bg-choice-option:#bb99a4;
  --bg-input:coral;
  --bg-start:navy;
  --bg-end: #ff667b;
  --bg-message:mediumseagreen;
  --bg-delete:orangered;
  --bg-test: #e1b987;

  --color-selected:cadetblue;
}

body {
  font-family: sans-serif;
  height:100vh;
}

.jtk-demo-main {
  display: flex;
  height: 100vh;
}

.jtk-demo-canvas {
  background-color: white;
  display: flex;
  flex-grow: 1;
  position: relative;
  overflow: hidden !important;
}

.jtk-demo-rhs {
  display: flex;
  flex-direction: column;
  margin: 0;
  background-color: #f9f9f9;
  flex: 0 0 250px;
  padding: 20px 5px 0 5px;
}

.node-palette {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f2f0ee;
  padding:0.25rem;
}


.miniview {
  position: absolute;
  top: 25px;
  right: 25px;
  z-index: 100;
}

.jtk-controls-container {
  top: 25px;
  position: absolute;
  left: 25px;
  z-index: 1;
  font-size:14px;
}

/* ------------------- edge styles -------------------------- */

.jtk-connector path {
  stroke:black;
  stroke-width: 2px;
}


/* -------------- node styles ------------------- */

.jtk-node {
  padding:0.5rem;
  border:1px solid #3177b8;
  border-radius: 3px;
  display:flex;
  align-items: center;
  width:190px;
  height:100px;
}

.jtk-node img {
  width:90px;
  margin-right:0.5rem;
}

.jtk-node > div {
  display: flex;
  flex-direction: column;
}

.jtk-surface-selected-element {
  outline:1px dotted seagreen;
  outline-offset: 1rem;
  background-color:var(--color-selected);
  color:white;
}

/* ----------- inspector --------------------- */
.jtk-orgchart-inspector {
  padding: 0.5rem;
  display:flex;
  flex-direction: column;
}

.jtk-orgchart-inspector-person {
  display:flex;
  align-items: center;
  padding:0.25rem;
  text-decoration: none;
  cursor:pointer;
  color:var(--color-selected);
}

.jtk-orgchart-inspector-person:visited {
  color:var(--color-selected);
}

.jtk-orgchart-inspector-person img {
  width:40px;
  margin-right:0.25rem;
}

.jtk-orgchart-inspector-person:hover {
  background-color: white;
}

.jtk-orgchart-inspector-person div {
  display:flex;
  flex-direction: column;
}

.jtk-orgchart-inspector-person div span {
  font-size:11px;
  color:black;
}


